<template>
  <div class="template-workUnitChangeForm-Lu">
    <a-modal
      :title="sqlx == '解聘'?'申请解聘':'申请延聘'"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="50%"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-workUnitChangeModal-Lu"
      @cancel="closeVisible">
      <div>
        <h3 v-if="isPrompt" style="text-align: center;color: red;">当前数据待审核无法修改</h3>
        <a-form layout="inline" class="personal-info-form" :form="form" :key="formKey">
          <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-dengji">
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                申请日期
              </span>
              <a-form-item>
                {{ moment(fromState.ffqsj).format('YYYY-MM-DD') }}
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                姓名
              </span>
              <a-form-item>
              {{ fromState.realname }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                身份证号
              </span>
              <a-form-item>
              {{ fromState.fsfzh }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                原工作单位
              </span>
              <a-form-item>
              {{ fromState.fgzdw }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2" v-if="link == 1">
              <span slot="label" class="descriptions-label-slot">
                审评类型
              </span>
              <a-form-item class="flex-w-row">
                <!-- <compSelector
                  :key="compSelectorkey"
                  :defaultValue="fromState.fyjcylb"
                  :compType="typeCheckbox"
                  class="comp-select-box-a"
                  dictionaryType="检查员登记类别"
                  :height="32"
                  disabled/> -->
                  <div v-if="plainOptions.length">
                    <span v-if="isView">{{ plainOptions.toString() }}</span>
                    <a-checkbox-group
                        v-else
                        v-model="plainOptions"
                        disabled
                        name="checkboxgroup"
                        :options="plainOptions"
                      />
                  </div>
                  <span v-else>暂无数据</span>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2" v-if="sqlx == '延聘'">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1">*</span>
                申请审评类型
              </span>
              <a-form-item class="flex-w-row">
                <span v-if="isView"> {{ fromState.fsqjcylb?fromState.fsqjcylb.toString():'暂无数据' }}</span>
                <!-- <compSelector
                  v-else
                  :key="compSelectorkey"
                  :defaultValue="fromState.fsqjcylb"
                  :compType="typeCheckbox"
                  class="comp-select-box-a"
                  dictionaryType="检查员登记类别"
                  :height="32"
                  @selectHandleChange="flbChange"
                  v-decorator="[ 'fsqjcylb', {initialValue:fromState.fsqjcylb,rules:rules.fsqjcylb}]"/> -->
                  <a-checkbox-group
                    v-else-if="!isView && plainOptions.length"
                    v-model="fromState.fsqjcylb"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="flbChange"
                    v-decorator="[ 'fsqjcylb', {initialValue:fromState.fsqjcylb,rules:rules.fsqjcylb}]"
                  />
                  <span v-else>暂无数据</span>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2" v-if="sqlx == '延聘'">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1 && !isView">*</span>
                  退休时间
              </span>
              <a-form-item class="flex-w-row">
                <span v-if="isView">{{ moment(fromState.ftxsj).format('YYYY-MM-DD') }}</span>
                <a-date-picker v-else format="YYYY-MM-DD" @change="ftxsjChange"
                  v-decorator="[ 'ftxsj', {initialValue:fromState.ftxsj,rules: rules.ftxsj}]"/>
              </a-form-item>
            </a-descriptions-item>
            <!-- {{ sqlx }} -->
            <a-descriptions-item :span="2" v-if="sqlx == '解聘'">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1 && !isView">*</span>
                申请解聘类型
              </span>
              <a-form-item class="flex-w-row">
                <span v-if="isView"> {{ fromState.fsqjcylb?fromState.fsqjcylb.toString():'暂无数据' }}</span>
                <!-- <compSelector
                  v-else
                  :key="compSelectorkey"
                  :defaultValue="fromState.fsqjcylb"
                  :compType="typeCheckbox"
                  class="comp-select-box-a"
                  dictionaryType="检查员登记类别"
                  :height="32"
                  @selectHandleChange="flbChange"
                  v-decorator="[ 'fsqjcylb', {initialValue:fromState.fsqjcylb,rules:rules.fsqjcylb}]"/> -->
                  <a-checkbox-group
                    v-else-if="!isView && plainOptions.length"
                    v-model="fromState.fsqjcylb"
                    name="checkboxgroup"
                    :options="plainOptions"
                    @change="flbChange"
                    v-decorator="[ 'fsqjcylb', {initialValue:fromState.fsqjcylb,rules:rules.fsqjcylb}]"
                  />
                  <span v-else>暂无数据</span>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 1 && !isView">*</span>
                  申请原因
              </span>
              <a-form-item class="flex-w-row">
                <span v-if="isView">{{ fromState.fsqyy }}</span>
                <a-textarea v-else placeholder="请输入意见" v-model="fromState.fsqyy"
                        :auto-size="{ minRows: 3}"
                        v-decorator="[ 'fsqyy', {initialValue:fromState.fsqyy,rules: rules.fsqyy}]"/>
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item v-if="sqlx == '延聘' && link !== 1">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 2">*</span>
                  聘期
              </span>
              <a-form-item class="flex-w-row">
                <span v-if="isView">{{ fromState.fpq }} 年</span>
                <!-- <a-input-number v-else placeholder="请输入聘期"
                        @change="fpqChange" style="width: 180px"
                        v-decorator="[ 'fpq', {initialValue:fromState.fpq,rules: rules.fpq}]"/> -->
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item v-if="sqlx == '延聘' && link !== 1">
              <span slot="label" class="descriptions-label-slot">
                <span class="xhText" v-if="link == 2">*</span>
                延聘结束时间
              </span>
              <a-form-item class="flex-w-row">
                <span v-if="isView">{{ fromState.fprjsrq?moment(fromState.fprjsrq).format('YYYY-MM-DD'):'' }}</span>
                <!-- <a-date-picker v-else format="YYYY-MM-DD" @change="fprjsrqChange"
                  v-decorator="[ 'fprjsrq', {initialValue:fromState.fprjsrq,rules: rules.fprjsrq}]"/> -->
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2"  v-if="link !== 1">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="link == 2 && !isView">*</span>
                    办理意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView && link !== 2">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="请输入意见" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
          </a-descriptions>
        </a-form>
      </div>
      <div v-if="link == 1" class="modal-footer-div">
        <a-button v-if="isPrompt" class="blue-btn" @click="closeVisible">关闭</a-button>
        <a-button v-if="!isPrompt" @click="saveForm">暂存</a-button>
        <a-button v-if="!isPrompt" @click="subForm" class="blue-btn" style="margin-left: 10px;">提交</a-button>
      </div>
      <div v-if="link == 2" class="modal-footer-div">
        <a-button class="red-btn" @click="nextClick('否')">驳回</a-button>
        <a-button class="blue-btn" style="margin-left: 10px;" @click="nextClick('是')">同意</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import { typeCheckbox } from '@/components/compSearchCriteria/ContractType'
import moment from 'moment'
import { queryWdZcjpxx,queryWdZcypxx,querySqInfo,bcsqZc,submitSq,submitSh,dict } from './service/index'
export default {
  components:{
    compSelector
  },
  data() {
    return {
      increaseVisible: false,
      formKey: '',
      moment,
      form: this.$form.createForm(this, { name: 'appointmentOfInspectorsFrom' }),
      fromState:{},
      rules:{
        fbghxx: [{
            required: true,
            message: '请输入现工作单位',
            trigger: 'blur',
        }],
        fsqjcylb: [{
            type: 'array',
            required: true,
            message: '请选择拟聘审评类型',
            trigger: 'blur',
        }],
        ftxsj: [{
            type: 'object',
            required: true,
            message: '请选择聘任时间',
            trigger: 'blur',
        }],
        fblyj: [{
            required: true,
            message: '请输入意见',
            trigger: 'blur',
        }],
      },
      link: 0,
      title: '',
      isView: false,
      compSelectorkey:null,
      typeCheckbox:typeCheckbox,
      sqlx: '',
      plainOptions: [],
      isPrompt: false,
    }
  },
  methods: {
    getData(type){
      //console.log(this.increaseVisible)
      this.link = 1
      this.sqlx = type
      if(type == '解聘'){
        this.title = '申请解聘'
        queryWdZcjpxx().then(res => {
          //console.log(res)
          let resItem = res.result.sq
          //console.log(resItem.fshzt)
          if(resItem.fshzt == '待审核'){
            this.isView = true
            this.isPrompt = true
          }
          let data1 = {}
          data1 = {
            id: resItem.id,
            ffqsj: resItem.ffqsj?resItem.ffqsj:new Date(),
            realname: resItem.realname,
            fsfzh: resItem.fsfzh,
            fgzdw: resItem.fgzdw,
            fyjcylb: resItem.fyjcylb?resItem.fyjcylb.split(','):null,
            fsqjcylb: resItem.fsqjcylb?resItem.fsqjcylb.split(','):null,
            fsqyy: resItem.fsqyy
          }
          this.getdict()
          this.fromState = data1
          //console.log(this.fromState)
          this.formKey = Date.now()
        })
      } else if(type == '延聘'){
        this.title = '申请延聘'
        queryWdZcypxx().then(res => {
        //console.log(res)
        let resItem = res.result.sq
        if(resItem.fshzt == '待审核'){
            this.isView = true
            this.isPrompt = true
          }
        let data1 = {}
        data1 = {
          id: resItem.id,
          ffqsj: resItem.ffqsj?resItem.ffqsj:new Date(),
          realname: resItem.realname,
          fsfzh: resItem.fsfzh,
          fgzdw: resItem.fgzdw,
          fpq: resItem.fpq,
          fprjsrq: resItem.fprjsrq?moment(resItem.fprjsrq):null,
          ftxsj: resItem.ftxsj?moment(resItem.ftxsj):null,
          fyjcylb: resItem.fyjcylb?resItem.fyjcylb.split(','):null,
          fsqjcylb: resItem.fsqjcylb?resItem.fsqjcylb.split(','):null,
          fsqyy: resItem.fsqyy
        }
        this.getdict()
        this.fromState = data1
        //console.log(this.fromState)
        this.formKey = Date.now()
      })
      }
    },
    getNewData(ids,link,view){
      this.link = link
      this.isView = view
      querySqInfo({id:ids}).then(res => {
        let resItem = res.result
        this.sqlx = resItem.fsqlx
        //console.log( this.sqlx)
        let data1 = {}
        data1 = {
          id: resItem.id,
          ffqsj: resItem.ffqsj?resItem.ffqsj:new Date(),
          realname: resItem.realname,
          fsfzh: resItem.fsfzh,
          fgzdw: resItem.fgzdw,
          ftxsj: resItem.ftxsj?moment(resItem.ftxsj):null,
          fyjcylb: resItem.fyjcylb,
          fsqjcylb: resItem.fsqjcylb?resItem.fsqjcylb.split(','):null,
          fsqyy: resItem.fsqyy,
          fpq: resItem.fpq,
          fprjsrq: resItem.fprjsrq?moment(resItem.fprjsrq):null,
          fblyj: resItem.fblyj
        }
        this.fromState = data1
        //console.log(this.fromState)
        this.formKey = Date.now()
      })
    },
    getdict(){
      dict("检查员登记类别").then(res => {
        res.result.forEach((item,index) => {
          //console.log(this.fromState.fyjcylb,item)
          if(this.fromState.fyjcylb.indexOf(item.itemValue) !== -1){
            this.plainOptions.push(item.itemValue)
          }
        })
      })
    },
    closeVisible(){
      this.increaseVisible = false
      this.isView = false
      this.isPrompt = false
      this.plainOptions = []
      this.link = 0
      this.$emit('success')
    },
    ftxsjChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.ftxsj = date?moment(date):null
      //console.log(this.fromState.ftxsj)
    },
    fprjsrqChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.fprjsrq = date?moment(date):null
    },
    flbChange(val){
      // //console.log(val)
      this.fromState.fsqjcylb = val
      // //console.log(this.fromState.fsqjcylb)
      this.form.setFieldsValue({
        fsqjcylb: val,
      });
      this.saveForm()
    },
    // 暂存
    saveForm(){
      let data = {
        id: this.fromState.id,
        fsqyy: this.fromState.fsqyy,
        fsqlx: this.sqlx,
        fsqjcylb: this.fromState.fsqjcylb?this.fromState.fsqjcylb.toString():null
      }
      if(this.sqlx == '解聘'){
        data = {
          ...data,
        }
      } else if (this.sqlx == '延聘'){
        data = {
          ...data,
          ftxsj: this.fromState.ftxsj?moment(this.fromState.ftxsj).format('YYYY-MM-DD'):''
        }
      }
      bcsqZc(data).then(res => {
        if(res.code == 200){
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 提交
    subForm(){
      this.form.validateFields((err, values) => {
        if(!err){
          let data = {
            id: this.fromState.id,
            fsqyy: this.fromState.fsqyy,
            fsqlx: this.sqlx,
            fsqjcylb: this.fromState.fsqjcylb?this.fromState.fsqjcylb.toString():null
          }
          if(this.sqlx == '解聘'){
            data = {
              ...data,
            }
          } else if (this.sqlx == '延聘'){
            data = {
              ...data,
              ftxsj: moment(this.fromState.ftxsj).format('YYYY-MM-DD')
            }
          }
          submitSq(data).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.closeVisible()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    // 驳回
    nextClick(isAgree){
      this.form.validateFields((err, values) => {
        if(!err){
          let data = {
            id: this.fromState.id,
            opinion: this.fromState.fblyj,
            sfty: isAgree
          }
          submitSh(data).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.closeVisible()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    }
  },
}
</script>
<style lang="less">
.form-workUnitChangeModal-Lu {
  .personal-info-form{
    .ant-form-item{
        margin: 5px 0;
    }
    .ant-form-item-label{
        width: 118px;
        font-weight: 600;
    }
    .ant-form-item-control-wrapper{
        // width: 180px;
    }
    .flex-w-er{
        width: 596px;
        .ant-form-item-control-wrapper{
            width: calc(100% - 118px);
        }
    }
    .flex-w-san{
      // width: 885px;
      width: calc(100vw - 1180px);
      min-width: 865px;
      .ant-form-item-control-wrapper{
            width: calc(100% - 118px);
        }
    }
    .flex-w-row {
      width: 100%;
      .ant-form-item-control-wrapper{
            width: calc(100%);
        }
    }
    .flex-w-label {
      .ant-form-item-label{
          width: 250px;
      }
    }
  }
  .modal-footer-div {
    display: flex;
    justify-content: end;
    margin-top: 30px;
  }
  .photo-frame {
    width: 100%;
    height: 300px;
    border: 1px dashed #d9d9d9;
    background-color: #fafafa;
    border-radius: 4px;
  }
  //---
  .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: right;
        font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .descriptions-dengji {
        .descriptions-label-slot{
          display: flex;
          align-items: center;
          width: 123px !important;//确保左侧固定文字不会换行
          line-height: 2;
          text-align: center;
          justify-content: center;
      }
      .descriptions-content-item {
        .ant-form-item-control-wrapper{
            width: 100%;
        }
      }
    }
    .descriptions-row .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 100px !important;//确保左侧固定文字不会换行
    }
    .xhText{

        color: #f5222d;
        line-height: 36px;
        font-size: 21px;
        font-weight: 600;
        height: 30px;
    }
    .descriptions-item-center{

    }
    .ant-form-inline .ant-form-item-with-help{
        margin-bottom: 0px !important;
    }
    .zm-form-model{
        display: flex;
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
    .ant-descriptions-bordered .ant-descriptions-row{
        border-bottom: 1px solid #e4e3e3;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        border-right: 1px solid #e4e3e3;
        line-height: 3;
        min-width: 100px;
    }
    .ant-descriptions-bordered .ant-descriptions-view{
        border: 1px solid #e4e3e3;
        border-right: 0;
    }
    .ant-descriptions-row:last-child{
        border-bottom: 0;
    }
}
</style>
